<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候-->
<style>
    a#a1:link{color: #ff0000}
    a#a1:visited{color: #00ff00}
    a#a1:hover{color: #0000ff}
    a#a1:active{color: #000000}
</style>

<a id="a1" href="https://baidu.com">超链4种状态</a><br>

<!--去除超链的下划线-->
<!--使用 text-decoration: none 文本修饰的样式来解决-->
<style>
    a.no_underline {text-decoration: none}
</style>

<a class="a2" href="http://www.12306.com">默认的超链</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>
<br>

<!--练习-下拉菜单风格-->
<style>
    .l1:visited{color: #0000ff}
    .l1{text-decoration: none}
    .hero{
        width: 100px;
        height: 200px;
        border: 1px gray solid;
        margin-top:10px;
        margin-left: 50px;
        border-collapse: collapse;
    }
    td{
        /*设置列属性:灰色,内边框属性:10 40 10 20,下边框白色,鼠标样式为指头*/
        color:Gray;
        padding:10px 0 10px 20px;
        border-bottom-color:white;
        cursor:pointer;
    }
    td:link{color: #ddd; text-decoration: none;}
    td:visited{color: #ddd; text-decoration: none;}
    td:hover{background-color: #ddd; text-decoration: none;}
    td:active{color: gray; text-decoration: none;}
</style>

<a class="l1" href="https://baidu.com">武器</a>
<a class="l1" href="https://baidu.com">护甲</a>
<a class="l1" href="https://baidu.com">英雄</a><br>

<table class="hero">
    <tr><td>盖伦</td></tr>
    <tr><td>提莫</td></tr>
    <tr><td>安妮</td></tr>
    <tr><td>死歌</td></tr>
</table>
</body>
</html>